<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">新增电池</view>
		</view>
		<form>
			<view class="cu-form-group">
				<view class="title">电池类型</view>
				<picker mode="selector" :value="typeIndex" :range="listData" range-key="name" @change="bindTypeChangeIn">
					<text class="picker">{{typeName}}</text>
				</picker>
			</view>
		    <view class="cu-form-group">
				<view class="title">设备序列号</view>
				<input placeholder="必须填写" v-model="batterySn"></input>
				<button class="cu-btn bg-orange shadow" @click="btnScan()">扫码</button>
		    </view>
			<view class="cu-form-group">
				<view class="title">租借类型</view>
				<picker mode="selector" :value="leaseTypeIndex" :range="leaseTypeListData" range-key="name" @change="bindLeaseTypeChangeIn">
					<text class="picker">{{leaseTypeListData[leaseTypeIndex].name}}</text>
				</picker>
			</view>
		</form>
		<view class="cu-bar btn-group margin-top">
		    <button class="cu-btn bg-grey shadow-blur round" @click="$utils.toBack()">取消</button>
			<button class="cu-btn bg-orange shadow-blur round" @click="btnSubmit()">确定</button>
		</view>
	</view>
</template>

<script>
	const wx = require('@/js_sdk/jweixin.js');
	export default {
		data() {
			return {
				batterySn:null,		//电池序列号
				listData:[],
				typeIndex:0,
				typeName:'--',
				leaseTypeListData:[{id:1,name:'自助租借'},{id:2,name:'门店租借'}],
				leaseTypeIndex:0
			};
		},
		onLoad(option) {
			this._loadListData();
		},
		onShow(){
			this._jssdk();
		},
		methods:{
			_jssdk(){
				let url = location.href.split('#')[0];
				const api = this.$request;
				api.post(api.url.wxSDK,{
					appId:this.$store.getters.GET_AppId,
					url:url
				},res=>{
					console.log(res)
					if(res.code==200){
						const data = res.body;
						wx.config({
						  debug: false,
						  appId: data.config.appId,        // 必填，公众号的唯一标识
						  timestamp: data.config.timestamp,// 必填，生成签名的时间戳
						  nonceStr: data.config.nonceStr,  // 必填，生成签名的随机串
						  signature: data.config.signature,// 必填，签名
						  jsApiList: ['scanQRCode']        // 必填，需要使用的JS接口列表
						});
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else {
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						})
					}
				})
			},
			_loadListData:function(){
				uni.showLoading({
					title:'加载中...'
				})
				const _self = this;
				const api = this.$request;
				api.post(api.url.bxscnBatteryTypeList,{},(res)=>{
					console.log(res)
					uni.hideLoading();
					if(res.code==200){
						_self.listData = res.body.items;
						_self.typeIndex = 0;
						_self.typeName = _self.listData[_self.typeIndex].name;
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false,
							complete:function(){
								wx.navigateBack();
							}
						})
					}else{
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						})
						setTimeout(function(){
							wx.navigateBack();
						},1000)
					}
				})
			},
			bindTypeChangeIn(e){
				console.log(e);
				this.typeIndex = e.detail.value;
				this.typeName = this.listData[this.typeIndex].name;
			},
			bindLeaseTypeChangeIn(e){
				console.log(e);
				this.leaseTypeIndex = e.detail.value;
			},
			btnScan(){
				console.log("scanQRcode")
				const _self = this;
				wx.ready(()=>{
					wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: function (res) {
							console.log(res.resultStr);
							let arr = res.resultStr.split('/');
							_self.batterySn = arr.pop();
						}
					})
				})
			},
			btnSubmit:function(){
				if(!this.batterySn || this.batterySn == ''){
					uni.showModal({
						title:'温馨提示',
						content:'请填写电池序列号'
					})
					return;
				}
				let batteryType = this.listData[this.typeIndex];
				let leaseType = this.leaseTypeListData[this.leaseTypeIndex];
				
				const _self = this;
				const api = this.$request;
				uni.showLoading({
					title:'处理中...'
				})
				api.post(api.url.bxscnBatterySave,{
					batteryType:batteryType.id,
					leaseType:leaseType.id,
					deviceSn:this.batterySn
				},(res)=>{
					console.log(res)
					uni.hideLoading();
					if(res.code==200){
						uni.showToast({
							title:'保存成功',
							icon:'success'
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.showToast({
							title:'操作失败',
							icon:'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">

</style>
